<template>
  <div class="message">
    <!-- <navbar :title="'我的消息'"></navbar> -->
    <div class="tabbar">
      <tabs v-model="active" color="#283C79" @change="onTabChange">
        <tab title="代理消息"></tab>
        <tab title="公司消息"></tab>
      </tabs>
    </div>

    <div class="records-list">
      <list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        ref="loadList"
        :immediate-check="false"
      >
        <div class="record-item" v-for="(item,index) in messageList" :key="index">
          <record-item
            :recordName="active == 0 ? messageType[item.messageType] : item.title"
            :recordTime="active == 0 ? item.createDate : item.publishTime"
          >
            <div class="record-info" slot="content">
              <div class="order-info">
                <p v-if="active == 0 && item.orderType">
                  <span>{{orderType[item.orderType]}}：{{item.orderNum}}</span>
                  <!-- <span>854112301654426</span> -->
                </p>
                <p>
                  <span>{{item.content}}</span>
                  <!-- <span>已完成</span> -->
                </p>
                <p v-if="active == 0 && item.orderStatus">
                  <span>状态：</span>
                  <span>{{orderStatus[item.orderStatus]}}</span>
                </p>
                <!-- <p>
                  <span></span>
                </p>-->
              </div>
            </div>
          </record-item>
        </div>
        <!-- <div
          class="record-item"
          v-if="active == 1"
          v-for="(item,index) in messageList"
          :key="index"
        >
          <record-item
            :recordName="item.title?item.title:''"
            :recordTime="item.publishTime?item.publishTime:''"
          >
            <div class="record-info" slot="content">
              <p v-if="item.content">{{item.content}}</p>
            </div>
          </record-item>
        </div>-->
      </list>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, List } from "vant";
import recordItem from "../components/record_item.vue";
import navbar from "../components/navbar.vue";
let moment = require("moment");
import{mapState} from 'vuex'

export default {
  components: {
    recordItem,
    navbar,
    Tab,
    Tabs,
    List
  },
  data() {
    return {
      active: 0,
      pageNumber: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      urls: {
        0: this.$urls.HQDLXX,
        1: this.$urls.HQGSXX
      },
      messageList: [],
      // msgList: [],
      messageType: {
        1: "代理消息",
        2: "订单消息",
        3: "款项消息"
      },
      orderType: {
        down: "下级代理订单",
        self: "订单编号"
      },
      orderStatus: {
        0: "待支付",
        1: "待发货",
        2: "已发货",
        3: "已完成",
        4: "上级缺货"
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  mounted() {
    this.$refs.loadList.check();
  },
  methods: {
    onTabChange(index) {
      this.active = index;
      // this.loading = true;

      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.messageList = [];

      setTimeout(() => {
        this.$refs.loadList.check();
      }, 100);
    },
    // 获取消息列表
    onLoad() {
      let data = {
        userId: this.userInfo.id,
        pageSize: this.pageSize,
        pageNumber: this.pageNumber
      };

      // 公司消息时
      if (this.active == 1) {
        data = Object.assign({}, data, {
          state: 1
        });
      }

      // console.log("执行了", data);
      if (this.loading == true) {
        this.$http.post(this.urls[this.active], data).then(res => {
          if (res.data.code == 200) {
            if (this.active == 0) {
              this.messageList = this.messageList.concat(res.data.data);
            } else {
              this.messageList = this.messageList.concat(res.data.data.rows);
            }

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.tabbar {
  position: sticky;
  top: 0;
}

.records-list {
  margin-top: 5px;
}

.record-item {
  margin-top: 1px;
  background-color: #fff;
  margin-bottom: 2px;
  font-size: 1rem;
}

.record-info {
  padding: 0 15px 10px 15px;
  text-align: left;
}

.order-info {
  margin-top: 1px;
}
</style>